<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {
            margin: 0;
            padding: 2;
            overflow: hidden;
        }

        body {
            background: #333;
        }

        #canvas {

            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border: 1px solid white;
            box-shadow: 0 0 1vw white, inset 0 0 1vw white;
        }
    </style>
    <title>Document</title>
</head>

<body>
    <canvas id="canvas"> </canvas>
    <script>
        class canvasanimotion {
            cardw = 0
            cardh = 0
            fontsize = '18'
            interval = null
            canvas = null;
            ctx = null;
            cards = [] //卡片数组
            pair = [] //配对数组
            save = [] //翻开卡片的索引
            constructor() {
                this.canvas = document.getElementById("canvas")
                this.ctx = canvas.getContext("2d")
                this.canvas.width = (window.innerWidth || document.documentElement.clientWidth) - 10;
                this.canvas.height = (window.innerHeight || document.documentElement.clientHeight) - 10;
                this.cardw = Math.floor(this.canvas.width / 10)
                this.cardh = Math.floor(this.canvas.height / 10)
                let that = this
                this.canvas.addEventListener("click", function (evt) { //获取点击事件
                    let cRect = that.canvas.getBoundingClientRect()
                    let canvasX = Math.round(evt.clientX - cRect.left)
                    let canvasY = Math.round(evt.clientY - cRect.top)
                    let x = parseInt(canvasX / that.cardw)
                    let y = parseInt(canvasY / that.cardh)
                    let origin = x * 10 + y //根据点击位置计算卡片索引
                    if (!that.cards[origin].turn) { //如果卡片状态为未翻开状态
                        that.cards[origin].turn = !that.cards[origin].turn //切换索引卡片翻转状态
                        that.pair.push(that.cards[origin].value) //将翻开的卡片值写入pair数组
                        that.save.push(origin) //将翻开的卡片索引写入save 数组
                        if (that.pair.length >= 2) { //当翻开两张时
                            console.log(that.pair);
                            if (that.pair[0] != that.pair[1]) { //判断两张卡片值是否相等
                                setTimeout(function () { //如不相等，延迟0.5秒后将翻开的卡片翻转回未翻开状态
                                    for (var i = 0; i < that.save.length; i++) {
                                        that.cards[that.save[i]].turn = !that.cards[that.save[i]].turn
                                    }
                                    that.save = [] //清空save及pair
                                    that.pair = []
                                }, 200)
                            }
                            else { //如两张卡片值相等，则保持翻转状态，仅清空save及pair数组
                                that.save = []
                                that.pair = []
                            }
                        }
                    }

                })
            }

            newgame() {
                var rnd = [] //空数组用于填充卡面
                for (var i = 0; i < 100; i++) {
                    rnd.push(i % 10) //分别填入0~9各10个值
                }
                var idx = 0 //索引
                this.cards = [] //清空卡片数组
                for (var i = 0; i < 10; i++) {
                    for (var j = 0; j < 10; j++) {
                        idx = parseInt(Math.random() * rnd.length) //获取随机索引值
                        this.cards.push({
                            value: rnd[idx], //写入卡片值
                            turn: false, //标记卡片为未翻开
                            x: i, //写入卡片横坐标
                            y: j //写入卡片纵坐标
                        })
                        rnd.splice(idx, 1) //删掉已经写入卡面的索引对应的数字
                    }
                }

                this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height) //清空画布
                this.ctx.fillStyle = "white" //填充文字为黑色


                this.interval = setInterval(() => {
                    this.draw()
                }, 1);
            }
            draw() {
                this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height) //清空画布
                this.ctx.font = this.fontsize + "px sans-serif" //设定文字属性
                for (var i = 0; i < this.cards.length; i++) { //遍历卡片数组
                    let card = this.cards[i]

                    this.ctx.fillStyle = "white" //默认填充白色
                    if (!card.turn) { //如卡片为翻开状态，则填充为黑色
                        this.ctx.fillStyle = "black"
                    }
                    this.ctx.fillRect(this.cardw * card.x + 1, this.cardh * card.y + 1, (this.cardw - 2), (this.cardh - 2)) //绘制卡片
                    this.ctx.fillStyle = "black" //填充文字为黑色
                    this.ctx.fillText(card.value, this.cardw * card.x + (this.cardw / 2 - this.fontsize / 2), this.cardh * card.y + (this.cardh / 2 + this.fontsize / 2)) //将文字值写入卡片位置
                }
            }

        }
        let game = new canvasanimotion()
        game.newgame()

    </script>

</body>

</html>